<template>
    <div class="foodTypeBack">
        <HeaderTop :title="this.params.title" class="heardTop">
          <router-link class="header_search" slot="left" to="/home">
            <i class="iconfont icon-xiazai6"></i>
          </router-link>
          <!-- user.id有值表明登录，跳转用户信息页，否则到登录页-->
          <router-link class="header_login" slot="right" :to="userInfo._id ? '/userInfo' : '/login' ">
            <span class="header_login_text" v-if="!userInfo._id">登录|注册</span>
            <span class="header_login_text" v-else>
              <i class="iconfont icon-geren"></i>
            </span>
          </router-link>
        </HeaderTop>
        <div v-if="this.params.description" class="desc">
          <p> &nbsp;&nbsp;{{this.params.description}}!</p>
        </div>
        <ShopList class="shopList"/>
        <div class="loading">
          <img src="./images/loading.gif" alt="加载中">
        </div>
    </div>
</template>

<script>
import HeaderTop from '../../components/HeaderTop/HeaderTop.vue'
import ShopList from '../../components/ShopList/ShopList.vue'
import {mapState} from 'vuex'
export default {
  components: {
    HeaderTop,
    ShopList
  },
  computed: {
    ...mapState(['userInfo'])
  },
  /**
 *  通过路由传值
 *      2.获取路径中传递的值
 * */
  created () {
    this.params = JSON.parse(this.$route.query.params)
  }
}
</script>

<style lang="stylus">
@import '../../common/stylus/mixins.styl'
.foodTypeBack{
  background: #fff
  .heardTop {
    .icon-xiazai6 {
      font-size 25px
      color #fff
      }
  }
  .desc {
    margin-top: 46px
    height 26px
    width: 100%
    background: rgb(2,167,155)
    color: #fff
    line-height: 26px
  }
  .shopList {
    position relative
    z-index 99
  }
  .loading {
    position relative
    z-index 90
    img {
      width 200px
      height 200px
      position absolute
      bottom -70px
      left 80px
    }
  }
}
</style>
